<template>
	<gui-page :fullPage="true" :isSwitchPage="true" :isLoading="pageLoading" ref="guiPage">
		<view slot="gBody" class="gui-flex1 gui-flex gui-columns" style="background-color:#F8F8F8;">
			<!-- 分类导航 -->
			<view class="header gui-border-b gui-border-box gui-flex gui-columns gui-justify-content-center"
				id="myheader">
				<gui-switch-navigation :size="180" :currentIndex="currentIndex" textAlign="center" :isCenter="true"
					activeDirection="center" activeLineBg="linear-gradient(to right, #008AFF,#008AFF)" :items="tabs"
					@change="navchange"></gui-switch-navigation>
			</view>
			<swiper :current="currentIndex" @change="swiperChange" :style="{height:mainHeight+'px', width:'750rpx'}">
				<!-- 轮播项目数量对应 上面的选项标签 -->
				<swiper-item v-for="(items, orderIndex) in orders" :key="orderIndex">
					<!-- 使用滚动区域来实现主体内容区域 -->
					<scroll-view :scroll-y="true" :scroll-top="scrollTops[currentIndex]"
						:style="{height:mainHeight+'px'}" @touchstart="touchstart" @touchmove="touchmove"
						@touchend="touchend" @scrolltolower="loadmorefun" @scroll="scroll">
						<!-- 刷新组件 -->
						<gui-refresh @reload="reload" ref="refreshcom"></gui-refresh>
						<gui-empty v-if="items.length <= 0">
							<view slot="img" class="gui-flex gui-rows gui-justify-content-center">
								<!-- 请根据您的项目要求制作并更换为空图片 -->
								<image class="gui-empty-img" src="@/static/noImg.png">
								</image>
							</view>
							<text slot="text" class="gui-text-small gui-block-text gui-text-center gui-margin-top"
								style="color:#9DABFF;">暂无数据</text>
						</gui-empty>
						<!-- 数据展示区域 -->
						<view class="client_item" @click="jumpDetail(order, oIndex)" v-if="items != null"
							v-for="(order, oIndex) in items" :key="oIndex">
							<view class="row gui-flex gui-align-items-center gui-space-between">
								<view class="user_info gui-flex gui-align-items-center">
									<gui-image :src="order.avatar" :width="98" :height="98" borderRadius="50%"
										mode="aspectFit"></gui-image>
									<view class="info_row">
										<view class="name gui-flex gui-align-items-center">
											<text class="f26">客户{{order.id}}</text>
											<view class="sgin">{{$u.stateFormData(order.state)}}</view>
											<view class="sgin dannger" v-if="order.overDay">
												超过{{$u.overDayFormData(order.overDay)}}天未联系</view>
										</view>
										<view class="rate">
											<uni-rate size="12" :readonly="true" :value="order.level" />
										</view>
									</view>
								</view>
								<view class="tool gui-flex gui-align-items-center">
									<view class="btn_r cancel" @click.stop="deleteClloct(order, oIndex)"
										v-if="order.isCollect == 1 && currentIndex != 1">
										取消收藏
									</view>
									<view class="btn_r dannger ml_10" @click.stop="addClloct(order, oIndex)"
										v-if="order.isCollect == 0">
										收藏
									</view>
									<view class="btn_r defult ml_10" v-if="currentIndex == 0"
										@click.stop="claimClient(order, oIndex)">
										认领客户
									</view>
								</view>
							</view>
							<view class="desc_row gui-flex">
								<view class="item right_line">
									<view class="status">
										客户状态
									</view>
									<view class="val">
										{{$u.typeFormData(order.type)}}
									</view>
								</view>
								<view class="item right_line">
									<view class="status">
										客户来源
									</view>
									<view class="val">
										{{order.source}}
									</view>
								</view>
								<view class="item right_line">
									<view class="status">
										客户类别
									</view>
									<view class="val">
										{{$u.clientTypeFormData(order.clientType) || '--'}}
									</view>
								</view>
								<view class="item">
									<view class="status">
										录入时间
									</view>
									<view class="val">
										{{order.createTime.substring(0,10) || '--'}}
									</view>
								</view>
							</view>
						</view>
						<!-- 加载组件 -->
						<gui-loadmore ref="loadmorecom"></gui-loadmore>
					</scroll-view>
				</swiper-item>
			</swiper>
			<gui-popup ref="searchPopup" position="right" width="480rpx">
				<view class="gui-relative gui-box-shadow gui-bg-white demo-lr">
					<view class="title f32">
						搜索
					</view>
					<view class="input_warp">
						<gui-search background="#f3f3f4" placeholder="客户姓名" :kwd="searchQuery.name" @inputting="inputting" @confirm="confirm" @clear="clearSearch"></gui-search>
					</view>
					<view class="title f32 mt_50">
						筛选
					</view>
					<view class="sm_title f28 c666 mt_50">
						客户等级
					</view>
					<view class="tab_row gui-flex gui-wrap">
						<view class="tab_item" :class="{'active': searchQuery.level == item.value}"
							@tap="changeLevel(item)" v-for="(item,index) in levelList" :key="index">
							{{item.label}}
						</view>
					</view>
					<view class="sm_title f28 c666 mt_50">
						客户类别
					</view>
					<view class="tab_row gui-flex gui-wrap">
						<view class="tab_item" :class="{'active': searchQuery.clientType == item.dictValue}"
							@tap="changeType(item)" v-for="(item,index) in typeList">
							{{item.dictLabel}}
						</view>
					</view>
					<!-- <view class="sm_title f28 c666 mt_50">
						客户来源
					</view>
					<view class="tab_row gui-flex gui-wrap">
						<view class="tab_item" v-for="(item,index) in 6">
							1级
						</view>
					</view> -->
					<view class="footer">
						<view class="btn left_btn" @tap="resetFun">
							重置
						</view>
						<view class="btn right_btn" @tap="searchFun">
							确定
						</view>
					</view>
				</view>
			</gui-popup>
		</view>
	</gui-page>
</template>
<script>
	var graceJs = require('@/GraceUI5/js/grace.js');
	// 模拟 api 请求数据，格式见 article.js
	var artciles = require('@/GraceUI5/demoData/article.js');
	export default {
		data() {
			return {
				isClick: true,
				// 全屏 loading
				pageLoading: true,
				// 选项卡标签
				tabs: [{
					id: 1,
					name: ''
				}],
				// 选中选项的 索引
				currentIndex: 0,
				// 核心区域高度 
				mainHeight: 200,
				// 订单信息保存数组
				orders: [],
				// 每个选项卡对应的分页
				pages: [],
				pageSize: 10,
				// 每个选项卡内部的滚动区域滚动值
				scrollTops: [],
				// 滚动延迟
				scrollTimer: null,
				// 加载更多延迟
				loadMoreTimer: null,
				// api 加载状态记录
				apiLoadStatus: [],
				searchQuery: {
					level: '',
					clientType: '',
					name: ''
				},
				typeList: [],
				levelList: [{
					value: 1,
					label: '一级'
				}, {
					value: 2,
					label: '二级'
				}, {
					value: 3,
					label: '三级'
				}, {
					value: 4,
					label: '四级'
				}, {
					value: 5,
					label: '五级'
				}]
			}
		},
		onLoad: function() {
			// 01. 获取页面主体高度
			graceJs.getRefs('guiPage', this, 0, (ref) => {
				ref.getDomSize('guiPageBody', (e) => {
					// 主体高度 = 页面高度 - 自定义区域高度
					graceJs.select('#myheader', (e2) => {
						// 如果自定义区域有 margin 尺寸获取不到请加上这个值，可以利用 uni.upx2px() 转换
						this.mainHeight = e.height - e2.height;
						// 模拟 api 加载新闻分类
						// 实际开发时此处改成 api 请求即可
						setTimeout(() => {
							this.tabs = [{
								id: 0,
								name: '未分配'
							}, {
								id: 1,
								name: '已分配'
							}, {
								id: 2,
								name: '已收藏'
							}];
							// 初始化新闻列表数组 元素数量与分类匹配
							for (var i = 0; i < this.tabs.length; i++) {
								this.orders.push([]);
								this.pages.push(1);
								this.scrollTops.push(0);
								this.apiLoadStatus.push(false);
							}
							// 第一次加载数据
							this.getOrders();
							this.getDictForm();
						}, 500);
					});
				});
			});
			uni.$off('updateList')
			uni.$on('updateList', (oIndex) => {
				this.orders[this.currentIndex].splice(oIndex, 1)
			})
		},
		onNavigationBarButtonTap(e) {
			console.log("点击了");
			this.searchOpen();
		},
		watch: {
			currentIndex: function(nVal, oldVal) {
				if (this.orders[nVal] == null) {
					return;
				}
				if (this.orders[nVal].length < 1) {
					this.getOrders();
				}
			}
		},
		methods: {
			resetFun() {
				this.searchQuery = {
					level: '',
					clientType: '',
					name: ''
				};
			},
			// 输入
			inputting(e) {
				console.log(e);
				this.searchQuery.name = e;
			},
			clearSearch() {
				this.searchQuery.name = '';
			},
			// 搜索
			confirm(e) {
				console.log(e);
				this.searchQuery.name = e;
			},
			// 选择等级
			changeLevel(item) {
				console.log(item);
				this.searchQuery.level = item.value;
			},
			changeType(item) {
				this.searchQuery.clientType = item.dictValue;
			},
			searchOpen() {
				this.$refs.searchPopup.open();
			},
			searchClose() {
				this.$refs.searchPopup.close();
			},
			getDictForm() {
				this.$api.getDictForm().then(res => {
					if (res.code == 200) {
						this.typeList = res.data.typeList;
					}
				})
			},
			jumpDetail(item, oIndex) {
				this.$u.to(`/pages/openSea/details?id=${item.id}&oIndex=${oIndex}`)
			},
			//认领客户
			claimClient(item, index) {
				if (this.isClick) {
					this.isClick = false;
				} else {
					return;
				}
				this.$api.claimClient({
					clientId: item.id
				}).then(res => {
					if (res.code == 200) {
						this.orders[this.currentIndex].splice(index, 1)
						this.$u.msg("认领成功");
					}else {
						this.$u.msg(res.msg);
					}
				}).finally(e => {
					this.isClick = true;
				})
			},
			// 收藏
			addClloct(item, index) {
				if (this.isClick) {
					this.isClick = false;
				} else {
					return;
				}
				this.$api.addClloct({
					clientId: item.id
				}).then(res => {
					if (res.code == 200) {
						item.isCollect = 1;
						let list = this.orders[0];
						this.$set(this.orders, 0, list)
						this.$u.msg("收藏成功");
					}else {
						this.$u.msg(res.msg);
					}
				}).finally(e => {
					this.isClick = true;
				})
			},
			// 取消收藏
			deleteClloct(item, index) {
				if (this.isClick) {
					this.isClick = false;
				} else {
					return;
				}
				this.$api.deleteClloct({
					clientId: item.id
				}).then(res => {
					if (res.code == 200) {
						item.isCollect = 0;
						let list = this.orders[0];
						this.$set(this.orders, 0, list)
						this.$u.msg("取消成功");
					}else {
						this.$u.msg(res.msg);
					}
				}).finally(e => {
					this.isClick = true;
				})
			},
			// 分类切换
			navchange: function(e) {
				this.currentIndex = e;
			},
			// 轮播切换
			swiperChange: function(e) {
				this.currentIndex = e.detail.current;
			},
			// 滚动区域滚动
			scroll: function(e) {
				if (this.scrollTimer != null) {
					clearTimeout(this.scrollTimer);
				}
				this.scrollTimer = setTimeout(() => {
					this.scrollTops.splice(this.currentIndex, 1, e.detail.scrollTop);
				}, 100);
			},
			// 下拉刷新相关事件绑定
			touchstart: function(e) {
				if (this.apiLoadStatus[this.currentIndex]) {
					return;
				}
				if (this.scrollTops[this.currentIndex] > 0) {
					return;
				}
				this.$refs.refreshcom[this.currentIndex].touchstart(e);
			},
			touchmove: function(e) {
				if (this.apiLoadStatus[this.currentIndex]) {
					return;
				}
				if (this.scrollTops[this.currentIndex] > 0) {
					return;
				}
				this.$refs.refreshcom[this.currentIndex].touchmove(e);
			},
			touchend: function(e) {
				if (this.apiLoadStatus[this.currentIndex]) {
					return;
				}
				if (this.scrollTops[this.currentIndex] > 0) {
					return;
				}
				this.$refs.refreshcom[this.currentIndex].touchend(e);
			},
			// 刷新事件
			reload: function() {
				this.pages[this.currentIndex] = 1;
				this.$refs.loadmorecom[this.currentIndex].stoploadmore();
				this.getOrders(1);
			},
			// 搜索事件
			searchFun() {
				this.searchClose();
				this.pages[this.currentIndex] = 1;
				this.$refs.loadmorecom[this.currentIndex].stoploadmore();
				this.getOrders();
			},
			// 加载更多事件
			loadmorefun: function() {
				var currentIndex = this.currentIndex;
				if (this.apiLoadStatus[currentIndex]) {
					return;
				}
				// 获取加载组件状态看一下是否还能继续加载
				if (this.$refs.loadmorecom[currentIndex].loadMoreStatus != 0) {
					return;
				}
				// 保证触底只执行一次加载
				if (this.loadMoreTimer != null) {
					clearTimeout(this.loadMoreTimer);
				}
				this.loadMoreTimer = setTimeout(() => {
					this.$refs.loadmorecom[currentIndex].loading();
					// 此处开启加载动画执行加载数据的函数
					this.getOrders();
				}, 80);
			},
			// 新闻数据读取
			getOrders: function(isReload) {
				// 使用内部变量记录 当前索引，避免加载时用户切换引起的变量变化
				var currentIndex = this.currentIndex;
				console.log(this.pages[currentIndex]);
				// 更新 api 加载状态
				this.apiLoadStatus.splice(currentIndex, 1, true);
				if (this.pages[currentIndex] == 1 && !isReload) {
					this.pageLoading = true;
				}
				// 当前正在展示的 选项index 为 this.currentIndex
				// 那么分类 id 应该为 this.tabs[this.currentIndex].id
				console.log('类型 : ' + this.tabs[currentIndex].name + ' 第' + this.pages[currentIndex] + '页');
				// 组合一个请求地址的 示例
				this.$api.getUnallot({
					pageNum: this.pages[currentIndex],
					pageSize: this.pageSize,
					type: this.tabs[currentIndex].id,
					...this.searchQuery
				}).then(res => {
					if (res.code == 200) {
						let total = Math.ceil(res.total / this.pageSize);
						// 第一页
						if (this.pages[currentIndex] == 1) {
							this.orders.splice(currentIndex, 1, res.data);
						} else {
							this.orders[currentIndex] = this.orders[currentIndex].concat(res.data);
							this.$refs.loadmorecom[currentIndex].stoploadmore();
							if (this.pages[currentIndex] >= total) {
								this.$refs.loadmorecom[currentIndex].nomore();
							}
						}
					}
					// 刷新
					if (isReload) {
						this.$refs.refreshcom[currentIndex].endReload();
						this.$refs.loadmorecom[currentIndex].stoploadmore();
					}
					this.pages[currentIndex]++;
					// 更新 api 加载状态
					this.apiLoadStatus.splice(currentIndex, 1, false);
					// this.orders[currentIndex] = res.data.noContact;
				}).finally(e => {
					this.pageLoading = false;
				})
			},
			// 删除订单
			// 参数 : orderIndex,   oIndex,  orderNumber
			//       数组第一层索引   订单索引     订单号码
			removeorder: function(orderIndex, oIndex, orderNumber) {
				console.log(orderIndex, oIndex);
				uni.showModal({
					title: "确定要删除吗？",
					complete: (e) => {
						if (e.confirm) {
							// 此处连接可以后端api 删除订单
							// 删除前端数据
							this.orders[orderIndex].splice(oIndex, 1);
							this.orders.splice(oIndex, 1, this.orders[orderIndex]);
						}
					}
				})
			}
		}
	}
</script>
<style lang="scss">
	.header {
		padding: 15rpx 30rpx;
		height: 100rpx;
		background-color: #fff;
	}

	.demo-lr {
		flex: 1;
		height: 200rpx;
		padding: 30rpx;
	}

	.input_warp {
		margin-top: 40rpx;
	}

	.demo-lr-items {
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		overflow: hidden;
	}

	.tab_row {
		margin-top: 30rpx;

		.tab_item {
			width: 126rpx;
			height: 60rpx;
			border-radius: 40rpx;
			background-color: #f4f4f4;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
		}

		.active {
			background-color: #cee2ff;
			color: #0e6eff;
		}

		&>.tab_item:nth-child(3n) {
			margin-right: 0;
		}
	}

	.footer {
		width: 100%;
		height: 200rpx;
		display: flex;
		align-items: center;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		justify-content: center;

		.btn {
			width: 200rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;

			&.left_btn {
				border-top-left-radius: 40rpx;
				border-bottom-left-radius: 40rpx;
				border: 1px solid #0e6eff;
				color: #0e6eff;
			}

			&.right_btn {
				border-top-right-radius: 40rpx;
				border-bottom-right-radius: 40rpx;
				background: linear-gradient(180deg, #7EC1FF 0%, #0A60FF 100%);
				color: #fff;
			}
		}
	}
</style>